<template>
  <div
    class="reg_tips"
  >
    <van-popup v-model:show="props.regVisible">
      <img
        class="register"
        src="@/assets/img/register.png"
        v-if="!props.userId"
        @click="goLogin"
      >
      <img
        class="register"
        src="@/assets/img/7f5015a4ba33f4f83e51fe1e137d922.png"
        v-if="store.state.userInfo.is_vip == 0 && props.userId"
        @click="goLogin"
      >
      <img
        class="close"
        @click="onCloseDialog"
        src="@/assets/img/close.png"
      >
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()

const emit = defineEmits(['closeDialog'])
const props = defineProps({
  regVisible: {
    type: Boolean,
    required: true,
    default: false
  },
  userId: {
    type: Boolean,
    required: true,
    default: false
  }
})

const onCloseDialog = () => {
  emit('closeDialog')
}

const goLogin = () => {
  emit('closeDialog')
  router.push('/login')
}

</script>

<style lang="less">
.reg_tips .register {
    width: 224px;
    height: 298px;
    border-radius: 20px;
    object-fit: cover;
}
.reg_tips .van-popup {
    background: inherit;
}
.reg_tips .close {
    width: 30px;
    height: 30px;
    object-fit: cover;
    margin: 0 auto;
}

@media (min-width: 750px) {
  .reg_tips .register {
    width: 224px;
    height: 298px;
    border-radius: 20px;
    object-fit: cover;
}
.reg_tips .van-popup {
    background: inherit;
}
.reg_tips .close {
    width: 30px;
    height: 30px;
    object-fit: cover;
    margin: 0 auto;
}
}
</style>
